<template>
  <div>
    <div class="i-layout-page-header mb-4">
      <PageHeader title="图片表" hidden-breadcrumb />
    </div>

    <Input
      search
      enter-button
      placeholder="输入关键字查找图片"
      size="large"
      v-model="searchData"
      @on-search="searchSeason(searchData)"
    /><br />

    <Table border :columns="columns1" :data="seasons"></Table>

    <div v-if="this.seasons.length == 1" class="add-fa">
      <div class="add">
        <Button type="success" size="large" @click="back">返回</Button>
      </div>
    </div>
    <div class="add-fa" v-else>
      <div class="add" @click="modal10 = true">
        <Icon type="ios-add-circle-outline" size="24" /><span> 添加</span>
      </div>
    </div>
    <Modal
      title="添加数据"
      v-model="modal10"
      class-name="vertical-center-modal"
      @on-ok="addSeason"
    >
      <span class="add-input">季节：</span>
      <Input
        v-model="value1"
        placeholder="请输入季节名"
        style="width: 300px; margin-bottom: 10px"
      /><br />
      <span class="add-input">景点id：</span
      ><Input
        v-model="value2"
        placeholder="请输入景点id"
        style="width: 300px"
      />
    </Modal>

    <Modal
      title="更改数据"
      v-model="modal"
      class-name="vertical-center-modal"
      @on-ok="updateSeason"
    >
      <span class="add-input">季节：</span>
      <Input
        disabled
        v-model="value3"
        placeholder="Enter something..."
        style="width: 300px; margin-bottom: 10px"
      /><br />
      <span class="add-input">景点id：</span
      ><Input
        v-model="value4"
        placeholder="Enter something..."
        style="width: 300px"
      />
    </Modal>
  </div>
</template>

<script>
import {
  getPictures,
  getSeasons,
  deleteSeason,
  addSeason,
  updateSeason,
  searchSeason,
} from "@api/borrower";
import { mapState } from "vuex";

export default {
  name: "procession",
  data() {
    return {
      page: 1,
      pageSize: 10,
      modal10: false,
      modal: false,
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      searchData: "",
      productName: null,
      borrower: [],
      seasons: [],

      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      data: {
        name: "",
        status1: "",
        count: null,
        date: "",
        status2: "",
        status3: "",
      },
      columns1: [
        {
          title: "景点id",
          key: "aid",
        },
        {
          title: "图片路径",
          key: "way",
        },
        {
          title: "Action",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    },
                  },
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.modal = true;
                      this.value3 = this.seasons[params.index].season;
                      this.value4 = this.seasons[params.index].sid;
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
  methods: {
    deleteSeasonByName(season) {
      deleteSeason(season)
        .then((res) => {
          console.log(res);
          this.seasons = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show(index) {
      this.$Modal.info({
        title: "季节详情",
        content: `season：${this.seasons[index].season}<br>sid：${this.seasons[index].sid}`,
      });
    },
    remove(index) {
      this.deleteSeasonByName(this.seasons[index].season);
      this.seasons.splice(index, 1);
    },
    //添加季节
    addSeason() {
      addSeason({ season: this.value1, sid: this.value2 })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      this.$router.go(0);
    },
    //更改季节
    updateSeason() {
      updateSeason({ season: this.value3, sid: this.value4 })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      this.$router.go(0);
    },
    //根据季节查询
    searchSeason(data) {
      searchSeason(data)
        .then((res) => {
          console.log(res);
          this.seasons = [];
          this.seasons[0] = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSeasons() {
      getPictures()
        .then((res) => {
          console.log(res);
          this.seasons = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.getSeasons();
    },
  },
  fatherMethod() {
    alert("调用");
  },
  mounted() {
    this.getSeasons();
  },
};
</script>

<style scoped>
.add-fa {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white;
  border: 1px solid gainsboro;
  border-top: none;
}
.add {
  margin: 0 auto;
  padding: 10px;
  cursor: pointer;
}
.i-layout-page-header {
  margin: -24px -24px 24px;
}
.add-input {
  display: inline-block;
  width: 60px;
}
</style>
